<template>
    <div class="navbars">
        <template v-if="screenWidth >= 769">
            <div class="nav-line">
                <div class="nav-line-item1">
                    <img src="@/assets/en.png" alt="us" @click="handClick('us')">
                </div>
                <div class="nav-line-item2">
                    <img src="@/assets/cn.png" alt="china" @click="handClick('china')" />
                </div>
            </div>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                @select="handleSelect">
                <el-menu-item index="sy">
                    <img style="max-width: 100px; height: auto;" :src="websiteConfig" alt="Element logo"
                        @click="handleSelect({ code: '/sy', id: 0 })" />
                </el-menu-item>
                <template v-if="NavList.length > 0" v-for="(item, index) in NavList" :key="index">
                    <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.code"
                        @click.native="handleSelect({ code: item.code, id: 0 })">
                        <!-- 自定义父级菜单项的点击事件 -->
                        <template #title @click="handleSelect({ code: item.code, id: 0 })">{{ item.title
                            }}</template>
                        <el-menu-item class="second-item" v-for="(item2, index2) in item.children" :key="index2"
                            :index="item2.code" @click="handleSelect({ code: item2.code, id: item2.p_id })">{{
                                item2.title
                            }}</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item v-else :index="item.code" @click="handleSelect({ code: item.code, id: 0 })">{{
                        item.title
                    }}</el-menu-item>
                </template>
            </el-menu>
        </template>
        <template v-if="screenWidth <= 768">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                menu-trigger="click">
                <el-menu-item index="sy">
                    <img style="width: 100px; height: 70px;" :src="websiteConfig" alt="Element logo"
                        @click="handleSelect({ code: '/sy', id: 0 })" />
                </el-menu-item>
                <el-sub-menu popper-class="down-popover">
                    <template #title><el-icon><icon-menu /></el-icon></template>
                    <template v-if="NavList.length > 0" v-for="(item, index) in NavList">
                        <el-menu-item :index="item.code" @click="handleSelect({ code: item.code, id: item.p_id })"
                            @open="toggleSubMenu(item.code)">
                            {{ item.title }}
                        </el-menu-item>
                        <template v-if="item.children && item.children.length > 0"
                            v-for="(item2, index2) in item.children" :key="index2">
                            <el-menu-item :index="item2.code"
                                @click="handleSelect({ code: item2.code, id: item2.p_id })"
                                @open="toggleSubMenu(item2.code)">
                                <el-icon>
                                    <CaretRight />
                                </el-icon>{{ item2.title }}
                            </el-menu-item>
                        </template>
                    </template>
                </el-sub-menu>
            </el-menu>
        </template>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import {
    Menu as IconMenu,
} from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

import logo from '@/assets/vue.svg';
import { getNavList } from '@/api/index';
import { getConfig } from '@/api/footer.js';

const router = useRouter();

const activeIndex = ref('/sy');
const openSubMenu = ref('');
const websiteConfig = ref({});
const NavList = ref([]);
websiteConfig.value = logo;

// 响应式数据，用于控制折叠面板的展开和收起状态
const isCollapseMenuOpen = ref(false);

// 响应式数据，用于存储屏幕宽度
const screenWidth = ref(window.innerWidth);

// 在组件挂载时获取初始屏幕宽度
onMounted(() => {
    screenWidth.value = window.innerWidth;
    getNavList().then(res => {
        if (res.data != null) {
            NavList.value = res.data.treeList;
        }
    });
    getConfig().then(res => {
        const logoConfig = res.data.filter(item => item.key === 'logo');
        if (logoConfig.length > 0) {
            websiteConfig.value = logoConfig[0].values;
        }
    });
});

const handClick = (lang) => {
    let url = "https://site.hcxinmou.cn";
    if (lang === 'us') {
        url = 'https://www.tamotec.com';
    }

    // 跳转到指定网址,新窗口打开
    window.open(url, '_blank');
}

// 监听屏幕尺寸变化，更新屏幕宽度数据
const updateScreenWidth = () => {
    screenWidth.value = window.innerWidth;
};
window.addEventListener('resize', updateScreenWidth);

// 当屏幕宽度变化时，根据新的宽度决定是否显示折叠面板
watch(screenWidth, (newWidth) => {
    if (newWidth >= 768) {
        isCollapseMenuOpen.value = false;
    }
});
// 监控路由变化，并根据路由高亮对应的菜单项也就是activeIndex
watch(() => router.currentRoute.value, (newRoute) => {
    activeIndex.value = newRoute.name || '/sy'; // 默认值为 '/sy'
});

// 处理菜单项的选择事件
const handleSelect = (item) => {
    if (typeof item === 'object' && item !== null) {
        // 根据需要处理 code 和 id
        let key = item.code;
        let pid = item.id;
        activeIndex.value = key;
        openSubMenu.value = '';
        // 判断是否是合作子菜单
        if (key === 'gm') {
            // 跳转到购买锚点
            router.push({ path: '/hz' }).then(() => {
                const purchaseElement = document.getElementById('01');
                if (purchaseElement) {
                    purchaseElement.scrollIntoView({ behavior: 'smooth' });
                }
            });
        } else if (key === 'hzjy') {
            // 跳转到合作经营锚点
            router.push({ path: '/hz' }).then(() => {
                const purchaseElement = document.getElementById('02');
                if (purchaseElement) {
                    purchaseElement.scrollIntoView({ behavior: 'smooth' });
                }
            });
        } else if (key === 'sqdl') {
            // 跳转到授权代理锚点
            router.push({ path: '/hz' }).then(() => {
                const purchaseElement = document.getElementById('03');
                if (purchaseElement) {
                    purchaseElement.scrollIntoView({ behavior: 'smooth' });
                }
            });
        } else {
            if (pid == 0) {
                router.push({ name: key });
            } else {
                router.push({ name: key, query: { id: pid } });
            }
        }
    }
}

const toggleSubMenu = (index) => {
    openSubMenu.value = openSubMenu.value === index ? '' : index;
};
</script>

<style lang="scss">
@media screen and (max-width: 768px) {
    .down-popover {
        min-width: 780px !important;
        padding: 0;
        margin-left: -5px;
        height: auto;
    }

    .el-menu--popup {
        min-width: 780px !important;
    }
}
</style>

<style scoped>
.el-menu {
    border-right: 0 !important;
}

:deep(.el-menu--horizontal.el-menu) {
    border-bottom: none;
}

@media screen and (max-width: 768px) {
    :deep(.second-item) {
        line-height: 15px;
        font-size: 10px;
    }

    .el-menu--horizontal {
        width: 100%;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        --el-menu-horizontal-height: 100px;
        border-bottom: none;

        /* 新增：让内部菜单项居中 */
        display: flex;
        justify-content: center;
        /* 水平居中 */
        padding: 0 20px;
        /* 避免内容贴边 */
    }

    .el-menu--horizontal>.el-menu-item {
        font-size: 17px;
    }


    :deep(.el-menu--horizontal>.el-menu-item.is-active) {
        font-size: 17px;
        border-bottom: none;
    }

    :deep(.el-menu--horizontal>.el-sub-menu.is-active) {
        font-size: 12px;
        border-bottom: none;
    }

    :deep(.el-menu--horizontal>.el-sub-menu .el-sub-menu__title) {
        line-height: 12px;
        font-size: 17px;
        border-bottom: none;
    }

    .el-menu--horizontal {
        --el-menu-horizontal-height: 120px;
        border-bottom: none;
    }

    .el-menu--horizontal>.el-menu-item {
        font-size: 20px;
    }

    .el-menu--horizontal>.el-menu-item:nth-child(1) {
        margin-right: 130px;
    }
}

/* 媒体查询，针对平板电脑（769px - 1280px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .navbars {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
    }

    .nav-line {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 10px;
        height: 35px;


        img {
            width: 50px;
            height: 50px;

            object-fit: cover;
        }
    }

    .nav-line-item1 {
        margin-right: 5vw;
        margin-left: 10px;
    }

    :deep(.second-item) {
        font-size: 17px;
        margin-top: 10px;
    }

    :deep(.el-menu--horizontal>.el-menu-item.is-active) {
        font-size: 17px;
        border-bottom: none;
    }

    :deep(.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title) {
        border-bottom: none;
    }

    :deep(.el-menu--horizontal>.el-menu-item.is-active) {
        font-size: 17px;
        border-bottom: none;
    }

    :deep(.el-menu--horizontal>.el-sub-menu.is-active) {
        font-size: 12px;
        border-bottom: none;
    }

    :deep(.el-menu--horizontal>.el-sub-menu .el-sub-menu__title) {
        line-height: 12px;
        font-size: 17px;
        border-bottom: none;
        /* padding: 0 0; */
    }

    :deep(.el-sub-menu__title) {
        padding: 0;
    }

    .el-menu--horizontal {
        width: 100%;
        max-width: 1920px;
        border-bottom: none;

        /* 新增：让内部菜单项居中 */
        display: flex;
        justify-content: center;
        /* 水平居中 */
        padding: 0 20px;
        /* 避免内容贴边 */
    }

    .el-menu--horizontal>.el-menu-item {
        font-size: 17px;
    }

    .el-menu--horizontal>.el-menu-item:first-child {
        margin-left: 50px;
    }

    .el-menu--horizontal>.el-menu-item:nth-child(1) {
        margin-right: auto;
    }
}

@media screen and (min-width: 1025px) {
    :deep(.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title) {
        border-bottom: none;
    }

    .navbars {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
    }

    .nav-line {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 10px;
        margin-bottom: 20px;
        height: 35px;


        img {
            width: 50px;
            height: 50px;

            object-fit: cover;
        }
    }

    .nav-line-item1 {
        margin-right: 35px;
        margin-left: 10px;
    }

    .el-menu--horizontal {
        width: 100%;
        max-width: 1920px;
        border-bottom: none;

        /* 新增：让内部菜单项居中 */
        display: flex;
        justify-content: center;
        /* 水平居中 */
        padding: 0 20px;
        /* 避免内容贴边 */
    }

    :deep(.el-menu--horizontal>.el-menu-item) {
        font-size: 17px;
        height: 30%;
        padding: 0;
        margin-left: 0.5vw;
        border-bottom: none;
    }

    :deep(.el-menu--horizontal>.el-sub-menu) {
        list-style: none;
        margin: 0;
        padding-left: 0;
        margin-left: 1vw;
    }

    :deep(.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover) {
        background-color: #fff;
    }


    :deep(.el-menu--horizontal>.el-menu-item.is-active) {
        font-size: 17px;
        border-bottom: none;
        background-color: #fff;
    }

    :deep(.el-menu--horizontal>.el-sub-menu.is-active) {
        font-size: 12px;
        border-bottom: none;
        background-color: #fff;
    }

    :deep(.el-menu--horizontal>.el-sub-menu .el-sub-menu__title) {
        line-height: 12px;
        font-size: 17px;
        border-bottom: none;
        height: 30%;
    }

    .el-menu--horizontal>.el-menu-item:nth-child(1) {
        margin-right: 15vw;
    }
}
</style>